<template>
  <div class="indexBar">
    <van-index-bar :index-list="indexList" z-index="0">

      <div v-for="(item,index) in indexList" :index=index :key="'indexList'+index">
        <van-index-anchor/>
        <p class="initials">{{ item }}</p>

        <div v-for="(itemSon,index) in indexBarList"
             :key="'indexBarList'+index">
          <contact-cell v-if="item===itemSon.initials"
                        :title="itemSon.name" :img="itemSon.avatar"></contact-cell>
        </div>

      </div>
    </van-index-bar>
    <div class="blank"></div>
  </div>
</template>

<script>
import {indexBarList} from "@/data/contact";
import Vue from 'vue';
import {IndexBar, IndexAnchor, Cell} from 'vant';
import ContactCell from "./contactCell";


Vue.use(IndexBar);
Vue.use(IndexAnchor);
Vue.use(Cell);
export default {
  name: "indexBar",
  components: {ContactCell},
  data() {
    return {
      indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L",
        "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "#"],
      indexBarList,
      indexBarInitails: []
    };
  },
  created() {

  }
}
</script>

<style scoped>
.blank {
  height: 1rem;
}

.initials {
  padding: .2rem .4rem;
  font-size: .3rem;
  color: #777777;
}
</style>